<template>
  <el-table :data="tableData" stripe border height="60" class="table-data" style="width: 100%">
    <el-table-column prop="FriendNick" label="昵称" min-width="160px"></el-table-column>
    <el-table-column label="头像" width="121px">
      <template slot-scope="scope">
        <el-image style="width: 60px; height: 60px" :src="scope.row.Avatar">
          <div slot="error" class="image-slot">
            <i style="font-size:50px;" class="el-icon-picture-outline"></i>
          </div>
        </el-image>
      </template>
    </el-table-column>
    <el-table-column prop="Gender" width="80px" label="性别"></el-table-column>
    <el-table-column label="来源">
      <template slot-scope="scope">
        <div v-if="scope.row.Source" v-text="$options.filters.getFriendSource(scope.row.Source)"></div>
      </template>
    </el-table-column>
    <el-table-column label="地区" width="120px">
      <template slot-scope="scope">
        <p>{{ scope.row.Province }}</p>
        <p>{{ scope.row.City }}</p>
      </template>
    </el-table-column>
    <el-table-column prop="Reason" label="验证语" min-width="200px"></el-table-column>
    <el-table-column label="时间" width="160px">
      <template slot-scope="scope">
        <span v-text="$options.filters.timeFilter(scope.row.ReqTime)"></span>
      </template>
    </el-table-column>
    <el-table-column prop="address" label="操作" min-width="90px">
      <template slot-scope="scope">
        <el-button v-if="scope.row.State === 1" type="info" size="mini">已添加</el-button>
        <el-button
          v-else-if="timeNow - scope.row.ReqTime >= 24*60*60*1000*3"
          type="info"
          size="mini"
        >已过期</el-button>
        <el-button
          v-else
          size="mini"
          type="primary"
          @click="acceptRequest(scope.$index, scope.row)"
        >接受</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'ToolsNewFriend',
  data() {
    return {
      timeNow: new Date().getTime()
    }
  },
  computed: {
    tableData() {
      return this.$store.getters['nedb/newFriends']
    }
  },
  methods: {
    // 接受请求
    acceptRequest(index, row) {
      this.$prompt('设置备注(非必需)', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^.{0,50}$/,
        inputErrorMessage: '备注超过50个字符'
      }).then(({ value }) => {
        row.Remark = value
        this.$store.dispatch('websocket/AcceptFriendAddRequestTask', row)
      }).catch(() => {
        this.$message.info('取消任务！')
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.table-data {
  flex: 1 1 auto;
  min-height: 100%;
  height: 100%;
}
</style>
